<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米商城</title>
    <link rel="stylesheet" href="../../bootstrap3/lib/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/public.css">
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <div class="top">
        <div class="top-t center">
            <div class="top-t-1">
                <ul>
                    <li>
                        <a href="">小米官网</a>
                    </li>
                    <li>
                        <a href="">小米商城</a>
                    </li>
                    <li>
                        <a href="">MIUI</a>
                    </li>
                    <li>
                        <a href="">loT</a>
                    </li>
                    <li>
                        <a href="">云服务</a>
                    </li>
                    <li>
                        <a href="">天星数科</a>
                    </li>
                    <li>
                        <a href="">有品</a>
                    </li>
                    <li>
                        <a href="">小爱开放平台</a>
                    </li>
                    <li>
                        <a href="">企业团购</a>
                    </li>
                    <li>
                        <a href="">资质证照</a>
                    </li>
                    <li>
                        <a href="">协议规则</a>
                    </li>
                    <li>
                        <a href="">下载app</a>
                        <!-- <div class="t-er1">
                            @@@@@
                        </div> -->
                    </li>
                    <li>
                        <a href="">Select Location</a>
                    </li>
                </ul>
            </div>
            <div class="top-t-2">
                <ul>
                    <li><a href="">登录</a>
                    </li>
                    <li><a href="">注册</a>
                    </li>
                    <li><a href="">消息通知</a>
                    </li>
                    <li>
                        <i>@</i>
                        <a href="">购物车（0）</a>
                        <div class="t-er2">
                            购物车中还没有商品，赶紧选购吧！
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div  class="nav">
    <nav class="center">
        <div class="nav-l">
            <img src="images/xm.png" alt="">
        </div>
        <div class="nav-c">
            <ul>
                <li style="opacity: 0;">全部商品清单</li>
                <li>Xiaomi手机
                    <div class="c-1">
                        <div class="c-2 center">
                            <ul>
                                <li>@</li>
                                <li style="border-left: 1px solid #e0e0e0;">@</li>
                                <li style="border-left: 1px solid #e0e0e0;">@</li>
                                <li style="border-left: 1px solid #e0e0e0;">@</li>
                                <li style="border-left: 1px solid #e0e0e0;">@</li>
                                <li style="border-left: 1px solid #e0e0e0;">@</li>
                            </ul>
                        </div>
                    </div>
                </li>
                <li>Redmi手机
                    <div class="c-1">
                        <div class="c-2 center">
                            <ul>
                                <li>@</li>
                                <li style="border-left: 1px solid #e0e0e0;">@</li>
                                <li style="border-left: 1px solid #e0e0e0;">@</li>
                                <li style="border-left: 1px solid #e0e0e0;">@</li>
                                <li style="border-left: 1px solid #e0e0e0;">@</li>
                                <li style="border-left: 1px solid #e0e0e0;">@</li>
                            </ul>
                        </div>
                    </div>
                </li>
                <li>电视
                    <div class="c-1">
                        <div class="c-2 center">
                            <ul>
                                <li>@</li>
                                <li style="border-left: 1px solid #e0e0e0;">@</li>
                                <li style="border-left: 1px solid #e0e0e0;">@</li>
                                <li style="border-left: 1px solid #e0e0e0;">@</li>
                                <li style="border-left: 1px solid #e0e0e0;">@</li>
                                <li style="border-left: 1px solid #e0e0e0;">@</li>
                            </ul>
                        </div>
                    </div>
                </li>
                <li>笔记本
                    <div class="c-1">
                        <div class="c-2 center">
                            <ul>
                                <li>@</li>
                                <li style="border-left: 1px solid #e0e0e0;">@</li>
                                <li style="border-left: 1px solid #e0e0e0;">@</li>
                                <li style="border-left: 1px solid #e0e0e0;">@</li>
                                <li style="border-left: 1px solid #e0e0e0;">@</li>
                                <li style="border-left: 1px solid #e0e0e0;">@</li>
                            </ul>
                        </div>
                    </div>
                </li>
                <li>平板
                    <div class="c-1">
                        <div class="c-2 center">
                            <ul>
                                <li>@</li>
                                <li style="border-left: 1px solid #e0e0e0;">@</li>
                                <li style="border-left: 1px solid #e0e0e0;">@</li>
                                <li style="border-left: 1px solid #e0e0e0;">@</li>
                                <li style="border-left: 1px solid #e0e0e0;">@</li>
                                <li style="border-left: 1px solid #e0e0e0;">@</li>
                            </ul>
                        </div>
                    </div>
                </li>
                <li>家电
                    <div class="c-1">
                        <div class="c-2 center">
                            <ul>
                                <li>@</li>
                                <li style="border-left: 1px solid #e0e0e0;">@</li>
                                <li style="border-left: 1px solid #e0e0e0;">@</li>
                                <li style="border-left: 1px solid #e0e0e0;">@</li>
                                <li style="border-left: 1px solid #e0e0e0;">@</li>
                                <li style="border-left: 1px solid #e0e0e0;">@</li>
                            </ul>
                        </div>
                    </div>
                </li>
                <li>路由器
                    <div class="c-1">
                        <div class="c-2 center">
                            <ul>
                                <li>@</li>
                                <li style="border-left: 1px solid #e0e0e0;">@</li>
                                <li style="border-left: 1px solid #e0e0e0;">@</li>
                                <li style="border-left: 1px solid #e0e0e0;">@</li>
                                <li style="border-left: 1px solid #e0e0e0;">@</li>
                                <li style="border-left: 1px solid #e0e0e0;">@</li>
                            </ul>
                        </div>
                    </div>
                </li>
                <li>服务中心
                    <div class="c-1">
                        <div class="c-2 center">
                            <ul>
                                <li>@</li>
                                <li style="border-left: 1px solid #e0e0e0;">@</li>
                                <li style="border-left: 1px solid #e0e0e0;">@</li>
                                <li style="border-left: 1px solid #e0e0e0;">@</li>
                                <li style="border-left: 1px solid #e0e0e0;">@</li>
                                <li style="border-left: 1px solid #e0e0e0;">@</li>
                            </ul>
                        </div>
                    </div>
                </li>
                <li>社区
                    <div class="c-1">
                        <div class="c-2 center">
                            <ul>
                                <li>@</li>
                                <li style="border-left: 1px solid #e0e0e0;">@</li>
                                <li style="border-left: 1px solid #e0e0e0;">@</li>
                                <li style="border-left: 1px solid #e0e0e0;">@</li>
                                <li style="border-left: 1px solid #e0e0e0;">@</li>
                                <li style="border-left: 1px solid #e0e0e0;">@</li>
                            </ul>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="nav-r">
            <div class="nav-rr">
                <input type="text" placeholder="点击变色">
                <div class="rr-1">@</div>
                <div class="rr-2">
                    <ul>
                        <li>全部商品</li>
                        <li>手机</li>
                        <li>耳机</li>
                        <li>洗衣机</li>
                        <li>冰箱</li>
                        <li>红米</li>
                        <li>空调</li>
                        <li>笔记本</li>
                    </ul>
                </div>
            </div>
        </div>
    </nav>
</div>
    <footer class="center">
        <div class="foot-l">
            <ul>
                <li>
                    手机
                    <i>@</i>
                    <div class="fl-1">
                        <ul>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                        </ul>
                    </div>
                </li>
                <li>
                    电视
                    <i>@</i>
                    <div class="fl-1">
                        <ul>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                        </ul>
                    </div>
                </li>
                <li>
                    家电
                    <i>@</i>
                    <div class="fl-1">
                        <ul>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                        </ul>
                    </div>
                </li>
                <li>
                    笔记本平板
                    <i>@</i>
                    <div class="fl-1">
                        <ul>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                        </ul>
                    </div>
                </li>
                <li>
                    出行穿戴
                    <i>@</i>
                    <div class="fl-1">
                        <ul>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                        </ul>
                    </div>
                </li>
                <li>
                    耳机 音响
                    <i>@</i>
                    <div class="fl-1">
                        <ul>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                        </ul>
                    </div>
                </li>
                <li>
                    健康儿童
                    <i>@</i>
                    <div class="fl-1">
                        <ul>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                        </ul>
                    </div>
                </li>
                <li>
                    生活信息
                    <i>@</i>
                    <div class="fl-1">
                        <ul>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                        </ul>
                    </div>
                </li>
                <li>
                    智能路由器
                    <i>@</i>
                    <div class="fl-1">
                        <ul>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                        </ul>
                    </div>
                </li>
                <li>
                    电源配件
                    <i>@</i>
                    <div class="fl-1">
                        <ul>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                            <li>@</li>
                        </ul>
                    </div>
                </li>

            </ul>
        </div>
        <div class="foot-r center">
            <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                <!-- Indicators -->
                <ol class="carousel-indicators">
                    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                </ol>

                <!-- Wrapper for slides -->
                <div class="carousel-inner" role="listbox">
                    <div class="item active">
                        <img src="images/1.webp" alt="...">
                    </div>
                    <div class="item">
                        <img src="images/2.webp" alt="...">
                    </div>
                    <div class="item">
                        <img src="images/3.jpg" alt="...">
                    </div>
                </div>
                </a>
            </div>
        </div>
    </footer>
</body>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="../../bootstrap3/lib/js/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="../../bootstrap3/lib/js/bootstrap.min.js"></script>

</html>